
<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="学习计划标题:">
                <a-input
                  v-model="keywords"
                  placeholder="请输入作业标题"
                  style="width:80%;"
                  @pressEnter="$refs.table.refresh(true)"
                >
                  <a-tooltip slot="suffix" title="请输入作业标题">
                    <a-icon
                      type="search"
                      style="color: rgba(0,0,0,.45)"
                      @click="$refs.table.refresh(true)"
                    />
                  </a-tooltip>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="上课老师">
                <a-select
                  v-model="queryParam.teacher_id"
                  placeholder="请选择上课老师"
                  @change="handleChange1"
                  style="width:80%;"
                  allowClear
                >
                  <!-- <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">关闭</a-select-option>
                  <a-select-option value="2">运行中</a-select-option>-->
                  <a-select-option
                    v-for="(item,index) in this.Isteacher"
                    :key="index"
                    :value="item.id"
                    allowClear
                  >{{item.name}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="所在班级">
                <a-select
                  v-model="queryParam.class_id"
                  placeholder="请选择班级"
                  allowClear
                  style="width:80%;"
                >
                  <a-select-option
                    v-for="(item,index) in classList"
                    :key="index"
                    :value="item.id"
                  >{{item.name}}</a-select-option>
                </a-select>
                <!-- <a-cascader :options="options" change-on-select @change="onChange" allowClear v-model="queryParam.class_id"/> -->
              </a-form-item>
            </a-col>
            <template v-if="advanced">
              <a-col :md="8" :sm="24">
                <a-form-item label="发布日期:">
                  <!-- <a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期" /> -->
                  <!-- <a-range-picker @change="onChange" style="width: 100%" /> -->
                  <a-range-picker :value="datevalue" @change="onChange" style="width: 80%" />
                </a-form-item>
              </a-col>
            </template>
          </a-row>
        </a-form>
      </div>
      <a
        style="cursor:pointer"
        v-if="advanced"
        @click="more"
        id="moreButton"
      >
        收起
        <a-icon type="up"></a-icon>
      </a>
      <a
        style="cursor:pointer"
        v-if="!advanced"
        @click="more"
        id="moreButton"
      >
        展开
        <a-icon type="down"></a-icon>
      </a>
      <div class="table-operator">
        <router-link :to="{name:'homeworkCreate'}">
          <a-button type="primary" style="margin-right:20px;">发布学习计划</a-button>
        </router-link>
        <!-- <router-link :to="{path:'/homeSchoolExpand/afterClassReviewCont/clockIn'}">
            <a-button>布置打卡作业</a-button>
        </router-link>-->
      </div>
      <s-table
        :columns="columns"
        :data="loadData"
        :rowKey="(record) => record.id"
        class="user_management_table"
        ref="table"
        :pagination="pagination"
        :scroll="{ x: 1500}"

      >
        <span slot="title_text" slot-scope="text, record">
          <a @click="$router.push({name:'homeworkInfo',query:{id:record.id}})">{{record.title_text}}</a>
        </span>
        <span slot="already_read" slot-scope="text, record" @click="alreadyRead(record)">
          <a>{{record.already_read}}</a>
        </span>
        <span slot="action" slot-scope="text,record">
          <a v-if="record.can_delete==1" @click="del(record)">删除</a>
          <span v-else>--</span>
        </span>
      </s-table>
      <a-modal
        :title="'作业标题:'+title_name"
        v-model="visible"
        @ok="handleOk"
        :footer="null"
        :bodyStyle="{padding:'16px'}"
      >
        <!-- <a-input-search placeholder="input search text" style="width: 200px" @search="onSearch" /> -->
        <a-table
          :columns="columns_read"
          :dataSource="readData"
          :pagination="false"
          :rowKey="(record) => record.id"
          class="user_management_table"
          style="border:1px solid #e8e8e8;margin-top:0;"
:scroll="{ y: 300 }"
        ></a-table>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import { STable, Ellipsis } from '@/components'
import CreateForm from '../../list/modules/CreateForm'
import { homeworkList, readStudent } from '@/api/homeSchool'
import { classList } from '@/api/class'
import { teacherList } from '@/api/teacher'
import { homeworkDel } from '@/api/homework'

const columns_read = [
  {
    title: '学员姓名',
    dataIndex: 'name',
    align: 'center'
  },
  {
    title: '电话',
    dataIndex: 'main_phone',
    align: 'center'
  },
  {
    title: '阅读状态',
    dataIndex: 'is_read',
    align: 'center',
    customRender(is_read) {
      return is_read == 1 ? '已读' : '未读' //1已读，2未读
    }
  }
]

export default {
  name: 'TableList',
  components: {
    STable,
    Ellipsis,
    CreateForm
  },
  data() {
    return {
      datevalue: [],
      visible: false,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      keywords: '',
      queryParam: {
        school_id: this.$store.state.user.school
      },
      pagination:{
        showTotal:total=>`共${total}条数据`,
      },
      notView: true,
      // 老师数据
      Isteacher: [],
      classList: [],
      columns: [
        {
          title: '学习计划标题',
          dataIndex: 'title_text',
          width:200,
          ellipsis: true,
          fixed:'left',
          scopedSlots: { customRender: 'title_text' }
        },
        {
          title: '发布时间',
          width:200,
          dataIndex: 'created_at',
        },
        {
          title: '截止时间',
          width:200,
          dataIndex: 'deadline',
        },
        // {
        //   title: '作业类型',
        //   dataIndex: 'type',
        //   type: 'type',
        //   align: 'center',
        //   customRender(type) {
        //     return type == 1 ? '单次' : '打卡' //1是单次，2是打卡
        //   }
        // },
        {
          title: '老师',
          dataIndex: 'teacher_name',
          ellipsis: true,
          width:150,
          key: 'teacher_name',
        },
        {
          title: '班级名称',
           width:150,
          dataIndex: 'class_name',
        },
        {
          title: '已读人数',
          dataIndex: 'already_read',
          align: 'center',
          scopedSlots: { customRender: 'already_read' }
        },
        {
          title: '操作',
          width: 100,
          dataIndex: 'action',
          fixed: 'right',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      loadData: parameter => {
        return homeworkList(Object.assign(parameter, this.queryParam, { keywords: this.keywords })).then(res => {
          return res
        })
      },
      readData: [],
      title_name: '',
      columns_read
    }
  },
  watch: {
    queryParam: {
      handler(newName, oldName) {
        this.$refs.table.refresh()
      },
      immediate: false,
      deep: true
    }
  },
  mounted() {
    // 获取老师信息
    teacherList({ school_id: this.queryParam.school_id, pageSize: 999999 }).then(res => {
      this.Isteacher = res.data
    })
    // 获取班级信息
    classList({ school_id: this.queryParam.school_id, pageSize: 999999 }).then(res => {
      this.classList = res.data
    })
  },
  methods: {
    alreadyRead(e) {
      readStudent(e.id).then(res => {
        this.title_name = res.title
        this.readData = res.student
        this.visible = true
      })
    },
    handleOk(e) {
      this.visible = false
    },
    resetSearchForm() {
      this.queryParam = {
        date: moment(new Date())
      }
    },
    // 获取的是key值
    handleChange1(key) {
      this.queryParam.teacher_id = key
    },
    handleChange2(key) {
      this.queryParam.class_id = key
    },
    onChange(date, dateString) {
      this.datevalue = date
      this.queryParam.start_time = dateString[0]
      this.queryParam.end_time = dateString[1]
      this.$refs.table.refresh()
    },
    newSelect() {
      this.queryParam = {}
      this.datevalue = []
    },
    del(data) {
      let that = this
      this.$confirm({
        title: '确定要删除作业吗?',
        content: '删除后学员提交的作业也会一并删除，且数据无法恢复。确定删除吗？',
        okText: '确定',
        okType: 'primary',
        cancelText: '取消',
        onOk() {
          homeworkDel(
            {
              school_id: that.$store.state.user.school
            },
            data.id
          )
            .then(res => {
              that.$refs.table.refresh()
              that.$message.success('删除成功')
            })
            .catch(err => {
              that.$message.error(err.data.message || '删除失败')
            })
        },
        onCancel() {}
      })
    },
    more(){
      this.advanced=!this.advanced
    }
  }
}
</script>
<style lang="less" scoped>
.expand_warning {
  margin: 16px 0;
  background-color: #fff0e7;
  border-radius: 4px;
}
.user_management_table {
  margin-top: 20px;
}
#moreButton {
  position: absolute;
  top: 34px;
  right: 20px;
}
</style>